<template>
    <box :title="title">
        <div class="flex h-[184px] items-center w-[100%]">
            <div class="flex-1 flex h-[110px] gap-[14px] justify-center items-center">
                <div class="w-[72px] h-[67px]">
                    <img class="w-[72px] h-[67px] object-cover" src="@/assets/screenimg/angetime.png" alt="">
                </div>
                <div class="flex  text-[14px] leading-[14px]  h-[67px]  justify-around flex-col">
                    <div>平均用时<span class="ml-[5px]">(h)</span></div>
                    <div class="gradient-text text-[24px] font-bold leading-[24px]">{{ isNullOrEmpty( inspectEfficiency?.avgTime ) }}
                    </div>
                </div>
            </div>
            <div class="w-[1px] bg-[#0B4F56] opacity-[0.4] h-[110px] rounded-[50%]"></div>
            <div class="flex-1 flex h-[110px] justify-center items-center">
                <div class="flex h-[110px] justify-between flex-col">
                    <div class="flex gap-[10px]">
                        <div class="w-[40px] h-[40px]">
                            <img class="w-[40px] object-cover h-[40px]" src="@/assets/screenimg/mintime.png" alt="">
                        </div>
                        <div class="flex  text-[14px] leading-[14px]  h-[40px]   flex-col">
                            <div class="mt-[3px]">最低用时<span class="ml-[5px]">(h)</span></div>
                            <div
                                class="mt-[12px] text-[24px] text-[var(--data-confirmed-color)] font-bold leading-[24px]">
                                {{ isNullOrEmpty( inspectEfficiency?.minTime ) }} </div>
                        </div>
                    </div>
                    <div class="flex gap-[10px]">
                        <div class="w-[40px] h-[40px]">
                            <img class="w-[40px] object-cover h-[40px]" src="@/assets/screenimg/maxtime.png" alt="">
                        </div>
                        <div class="flex  text-[14px] leading-[14px]  h-[40px]   flex-col">
                            <div class="mt-[3px]">最高用时<span class="ml-[5px]">(h)</span></div>
                            <div class="mt-[12px] text-[24px] text-[var(--data-danger-color)] font-bold leading-[24px]">
                                {{ isNullOrEmpty( inspectEfficiency?.maxTime ) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </box>
</template>
<script setup lang="ts">
import {isNullOrEmpty} from '@/utils/functions'
import box from '@/views/large-data-screen/component/box.vue'
const props = defineProps({
    title: {
        type: String,
        default: 'title'
    },
    inspectEfficiency: {
        type: Object,
        default: () => {
            return {
                "avgTime": 18,
                "maxTime": 30,
                "minTime": 20
            }
        }
    }

})
</script>